<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
</head>

    <style>

    </style>

<body>
    <div><input id="reset" type="button" value="重新开始一局游戏"></div>
    
    <div id="game">
        <span>请输入要猜的数字:</span>
        
        <input type="text" value="" id="input">
        <input type="button" value="猜" id="ok">
        <div id="number">已经猜的次数:0</div>
        <span id="result">结果:</span>
    </div>

    <script>
        // 1.获取元素部分
        var button = document.querySelector('#reset');
        var result = document.querySelector('#result');
        var number = document.querySelector('#number');
        var ok = document.querySelector('#ok');
        var input = document.querySelector('#input');
        //console.log(button);  这里算是检查部分

        //2. 设置一些预备的，在之后需要使用的变量
        var resnum = Math.round(Math.random()*100);     // 本轮猜数字游戏的结果
        var hasnum = 0    // 已经猜的次数
        var res = "";
        // 3.对获取的这些元素进行操作
        console.log(resnum);
        // 注册点击事件
        button.onclick = function(){
            // console.log("注册成功");
            // 重新生成新的数字， 将结果清零  并将 原页面内容也清零
            hasnum = 0;
            res = "";
            resnum = Math.round(Math.random()*100);
            result.innerText = "结果:"+" "+ res;
            number.innerText = "已经猜的次数:"+ hasnum;
            input.value="";
            //console.log(input.value);
            console.log(resnum);
        }

        // 注册用户输入事件
        // 注册猜事件     , 先获取用户输入，然后将其转化为数字对比，然后结果
        ok.onclick = function() {
            var getnum = parseInt(input.value);
            if(getnum==resnum){
                alert("恭喜你，猜对了");
                res = "success";
            }else if(getnum<resnum){
                res = "猜小了";
            } else{
                res = "猜大了";
            }
            // 然后更新页面内容
            hasnum+=1;
            result.innerText = "结果:"+" "+ res;
            number.innerText = "已经猜的次数:"+ hasnum;
            // try{
            //     var getnum = parseInt(input.value);   // 这里设置一个错误检查
            //     console.log();    // 想多了，不需要异常处理， 如果转换失败，会直接给NaN的值
            // }catch(){

            // }

        }



    </script>
    
</body>
</html>